<script setup lang="js">
import { reactive, ref } from 'vue'
const red={color:'red'};
const blue={color:'blue'};
const refColor=ref({
  type:red
})
console.log('refColor.value.type',refColor.value.type)
// refColor.value.type是Proxy代理对象
function changeColor1() {
  if(refColor.value.type===reactive(red)){
    // 可使用refColor.value.type===reactive(red)进行判断
    refColor.value.type=blue
  }else if(refColor.value.type===reactive(blue)){
    refColor.value.type=red
  }
}
function changeColor2() {
  if(refColor.value.type===ref(red)){
    // refColor.value.type是Proxy对象，后者是Ref对象，两者不相等
    // 可使用refColor.value.type===reactive(red)进行判断
    refColor.value.type=blue
  }else if(refColor.value.type===ref(blue)){
    // 等值条件不成立
    refColor.value.type=red
  }
}
</script>


<template>
  <div class="q-pa-6">
    <q-banner class="bg-purple-4 text-white text-center mb-8">
      <p class="text-h4">陈一非 23211860123</p>
    </q-banner>

    <div class="bg-white rounded-lg shadow p-4 mb-6">
      <h3 class="text-xl text-center font-bold mb-4">作业八</h3>
      <div class="row justify-center gap-4">
        <q-btn @click="changeColor1" color="primary" rounded-full label="Change1" />
        <q-btn @click="changeColor2" color="secondary" rounded-full label="Change2" />
      </div>
    </div>

    <q-card class="q-ma-auto" style="max-width: 500px;">
      <q-card-section>
        <p class="text-lg mb-2"><strong>red变量值：</strong>{{ red }}</p>
        <p class="text-lg mb-2"><strong>blue变量值：</strong>{{ blue }}</p>
        <p class="text-lg"><strong>refColor变量值：</strong>{{ refColor }}</p>
      </q-card-section>
    </q-card>
  </div>
</template>
<style scoped>

</style>
